<template>
  <div class="chat-app">
    <!-- 连接状态指示器 -->
    <div :class="['connection-status', connectionStatus]">
      <span v-if="connectionStatus === 'connected'">✅ 已连接 ({{ currentUser.username }})</span>
      <span v-else-if="connectionStatus === 'connecting'">🔄 连接中...</span>
      <span v-else-if="connectionStatus === 'reconnecting'">🔄 重新连接中...</span>
      <span v-else-if="connectionStatus === 'error'">
        ❌ 连接失败: {{ connectionError }}
        <button @click="reconnect" class="reconnect-btn">重连</button>
      </span>
      <span v-else>❌ 未连接</span>
      
      <!-- 调试信息 -->
      <button @click="checkConnectionStatus" class="debug-btn">检查状态</button>
    </div>

    <div class="content">
      <div class="left">
        <div class="left-header">
          <h3>用户列表</h3>
          <div class="current-user-selector">
            <label>当前用户:</label>
            <select v-model="currentUser" @change="onCurrentUserChange" class="user-select">
              <option v-for="user in allUsers" :key="user.username" :value="user">
                {{ user.nickname }}
              </option>
            </select>
          </div>
          <div class="online-status">
            在线用户: {{ onlineUsers.length }}
            <span class="debug-info">(当前: {{ currentUser.username }})</span>
          </div>
        </div>
        <ul class="user-list">
          <li 
            v-for="user in filteredUsers" 
            :key="user.username" 
            class="user-item"
            :class="{ 
              active: selectedUser && selectedUser.username === user.username,
              online: isUserOnline(user.username)
            }"
            @click="selectUser(user)"
          >
            <div class="user-avatar">
              <img :src="user.avatar" :alt="user.nickname" />
              <span class="online-dot" v-if="isUserOnline(user.username)"></span>
            </div>
            <div class="user-info">
              <div class="nickname">{{ user.nickname }}</div>
              <div class="last-message">{{ getLastMessage(user.username) }}</div>
            </div>
            <div class="message-time" v-if="getLastMessageTime(user.username)">
              {{ getLastMessageTime(user.username) }}
            </div>
            <div class="unread-badge" v-if="getUnreadCount(user.username) > 0">
              {{ getUnreadCount(user.username) }}
            </div>
          </li>
        </ul>
      </div>

      <div class="right">
        <div v-if="selectedUser" class="chat-container">
          <!-- 聊天头部 -->
          <div class="chat-header">
            <div class="chat-user-info">
              <div class="chat-avatar">
                <img :src="selectedUser.avatar" :alt="selectedUser.nickname" />
                <span class="online-dot" v-if="isUserOnline(selectedUser.username)"></span>
              </div>
              <div class="chat-user-details">
                <h3>{{ selectedUser.nickname }}</h3>
                <span class="chatting-status">
                  {{ isUserOnline(selectedUser.username) ? '在线' : '离线' }}
                </span>
              </div>
            </div>
            <div class="current-user-badge">
              当前身份: {{ currentUser.nickname }}
            </div>
          </div>

          <!-- 聊天消息区域 -->
          <div class="chat-messages" ref="messagesContainer">
            <div 
              v-for="message in getChatMessages(selectedUser.username)" 
              :key="message.id"
              :class="['message', message.sender === currentUser.username ? 'message-sent' : 'message-received']"
            >
              <div class="message-avatar" v-if="message.sender !== currentUser.username">
                <img :src="selectedUser.avatar" :alt="selectedUser.nickname" />
              </div>
              <div class="message-content">
                <div class="message-bubble">
                  <p class="message-text">{{ message.text }}</p>
                  <span class="message-time">{{ formatTime(message.time) }}</span>
                  <span v-if="message.pending" class="message-status">发送中...</span>
                  <span v-else-if="message.failed" class="message-status failed">✗</span>
                  <span v-else-if="message.sender === currentUser.username" class="message-status">
                    <span v-if="message.offline">⏳</span>
                    <span v-else>✓</span>
                  </span>
                </div>
                <div v-if="message.offline" class="offline-message-hint">
                 
                </div>
              </div>
              <div class="message-avatar" v-if="message.sender === currentUser.username">
                <img :src="currentUser.avatar" :alt="currentUser.nickname" />
              </div>
            </div>
          </div>
            
          <!-- 消息输入框 -->
          <div class="chat-input-container">
            <div class="input-wrapper">
              <textarea 
                v-model="newMessage"
                @keypress.enter.prevent="sendMessage"
                placeholder="输入消息..."
                class="message-input"
                rows="1"
              ></textarea>
              <button 
                @click="sendMessage" 
                class="send-btn"
                :disabled="!newMessage.trim() || isSending"
              >
                {{ isSending ? '发送中...' : '发送' }}
              </button>
            </div>
            <div v-if="!isUserOnline(selectedUser.username)" class="offline-notice">
             
            </div>
          </div>
        </div>
        
        <div v-else class="no-selection">
          <div class="placeholder-icon">💬</div>
          <h2>开始聊天</h2>
          <p>请从左侧选择一个用户开始对话</p>
          <p class="current-user-hint">当前身份: {{ currentUser.nickname }}</p>
          <div class="online-users">
            <h4>在线用户 ({{ onlineUsers.length }})</h4>
            <ul>
              <li v-for="username in onlineUsers" :key="username">
                {{ getUserByUsername(username) ? getUserByUsername(username).nickname : username }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import signalRService from '../SignalR.js'

export default {
  name: 'ChatApp',
  data() {
    const allUsers = [
      {
        username: "john_doe",
        nickname: "John Doe",
        avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
      },
      {
        username: "jane_smith",
        nickname: "Jane Smith", 
        avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face"
      },
      {
        username: "mike_wilson",
        nickname: "Mike Wilson",
        avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
      },
      {
        username: "sarah_johnson",
        nickname: "Sarah Johnson",
        avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face"
      }
    ]
    
    return {
      selectedUser: null,
      newMessage: '',
      currentUser: allUsers[0],
      allUsers: allUsers,
      chatMessages: {},
      unreadMessages: {},
      connectionStatus: 'disconnected',
      connectionError: null,
      onlineUsers: [],
      isSending: false
    }
  },
  computed: {
    filteredUsers() {
      return this.allUsers.filter(user => user.username !== this.currentUser.username)
    }
  },
  methods: {
    async initSignalR() {
      console.log('🟡 开始初始化 SignalR 连接，用户:', this.currentUser.username)
      this.connectionStatus = 'connecting'
      this.connectionError = null
      
      try {
        // 先断开现有连接
        await signalRService.disconnect()
        
        // 设置 SignalR 事件处理器
        signalRService.handleReceiveMessage = this.handleRealTimeMessage
        signalRService.handleUserStatus = this.handleUserStatus
        signalRService.handleOnlineUsers = this.handleOnlineUsers
        signalRService.handleError = this.handleError
        signalRService.handleConnectionStatus = this.handleConnectionStatus
        
        const connected = await signalRService.connect(this.currentUser)
        
        if (connected) {
          this.connectionStatus = 'connected'
          console.log('✅ 前端连接成功，用户:', this.currentUser.username)
          
          // 立即将当前用户添加到在线用户列表
          if (!this.onlineUsers.includes(this.currentUser.username)) {
            this.onlineUsers.push(this.currentUser.username)
          }
          
          // 延迟检查在线用户状态
          setTimeout(() => {
            this.checkConnectionStatus()
          }, 1000)
        } else {
          throw new Error('连接失败')
        }
        
      } catch (error) {
        console.error('❌ 前端连接失败:', error)
        this.connectionStatus = 'error'
        this.connectionError = error.message || '连接失败'
      }
    },

    handleRealTimeMessage(sender, message) {
      console.log('📨 前端收到实时消息:', { sender, message, currentUser: this.currentUser.username })

      // 创建消息对象
      const newMessage = {
        id: Date.now() + Math.random(),
        sender: sender,
        text: message,
        time: new Date(),
        isRealTime: true
      }
      
      // 存储消息到对应的聊天
      this.addMessageToChat(sender, newMessage)
      
      // 如果当前没有选中这个用户，增加未读计数
      if (!this.selectedUser || this.selectedUser.username !== sender) {
        this.incrementUnreadCount(sender)
      }
      
      // 如果当前正在与发送者聊天，滚动到底部
      if (this.selectedUser && this.selectedUser.username === sender) {
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }
    },

    // 添加消息到对应的聊天
    addMessageToChat(otherUsername, message) {
      const chatKey = this.getChatKey(this.currentUser.username, otherUsername)
      
      // 确保聊天记录存在
      if (!this.chatMessages[chatKey]) {
        this.$set(this.chatMessages, chatKey, [])
      }
      
      // 添加消息
      this.chatMessages[chatKey].push(message)
      
      console.log(`💾 消息已存储到聊天 ${chatKey}`, {
        发送者: message.sender,
        内容: message.text,
        当前聊天记录数: this.chatMessages[chatKey].length
      })
    },

    handleUserStatus(username, isOnline) {
      console.log('👤 用户状态更新:', { username, isOnline, currentUser: this.currentUser.username })
      
      // 当前用户始终显示为在线
      if (username === this.currentUser.username) {
        if (!this.onlineUsers.includes(username)) {
          this.onlineUsers.push(username)
        }
        return
      }
      
      if (isOnline) {
        if (!this.onlineUsers.includes(username)) {
          this.onlineUsers.push(username)
          console.log('✅ 用户上线:', username, '在线用户列表:', this.onlineUsers)
        }
      } else {
        this.onlineUsers = this.onlineUsers.filter(user => user !== username)
        console.log('❌ 用户下线:', username, '在线用户列表:', this.onlineUsers)
      }
      
      // 强制更新视图
      this.$forceUpdate()
    },

    handleOnlineUsers(users) {
      console.log('📋 收到在线用户列表:', users, '当前用户:', this.currentUser.username)
      this.onlineUsers = users || []
      
      // 确保当前用户始终在在线列表中
      if (!this.onlineUsers.includes(this.currentUser.username)) {
        this.onlineUsers.push(this.currentUser.username)
      }
      
      console.log('当前在线用户:', this.onlineUsers)
      this.$forceUpdate()
    },

    handleError(error) {
      console.error('❌ SignalR 错误:', error)
      this.connectionError = error
      this.connectionStatus = 'error'
    },

    handleConnectionStatus(status) {
      console.log('🔗 连接状态变更:', status, '用户:', this.currentUser.username)
      this.connectionStatus = status
    },

    async sendMessage() {
      if (!this.newMessage.trim() || !this.selectedUser || this.isSending) return
      
      const messageText = this.newMessage.trim()
      this.isSending = true
      
      try {
        // 先添加到本地，提供即时反馈
        const messageId = Date.now() + Math.random()
        const isTargetOnline = this.isUserOnline(this.selectedUser.username)
        
        const localMessage = {
          id: messageId,
          sender: this.currentUser.username,
          text: messageText,
          time: new Date(),
          isRealTime: true,
          pending: true,
          offline: !isTargetOnline
        }
        
        // 使用新方法添加消息
        this.addMessageToChat(this.selectedUser.username, localMessage)
        this.newMessage = ''
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom()
        })
        
        // 通过 SignalR 发送
        const success = await signalRService.sendMessage(this.selectedUser.username, messageText)
        
        if (success) {
          // 更新消息状态
          this.updateMessageStatus(this.selectedUser.username, messageId, {
            pending: false,
            sent: true,
            offline: !isTargetOnline
          })
          console.log('✅ 消息发送成功')
        } else {
          throw new Error('发送失败')
        }
        
      } catch (error) {
        console.error('Failed to send message:', error)
        
        // 标记消息为发送失败
        this.updateMessageStatus(this.selectedUser.username, messageId, {
          pending: false,
          failed: true
        })
        
        alert('消息发送失败: ' + (error.message || '网络连接问题'))
      } finally {
        this.isSending = false
      }
    },

    // 更新消息状态
    updateMessageStatus(otherUsername, messageId, updates) {
      const chatKey = this.getChatKey(this.currentUser.username, otherUsername)
      if (this.chatMessages[chatKey]) {
        const messageIndex = this.chatMessages[chatKey].findIndex(msg => msg.id === messageId)
        if (messageIndex !== -1) {
          this.$set(this.chatMessages[chatKey], messageIndex, {
            ...this.chatMessages[chatKey][messageIndex],
            ...updates
          })
        }
      }
    },

    async reconnect() {
      console.log('🔄 手动重连...')
      await this.initSignalR()
    },

    async onCurrentUserChange() {
      console.log('🔄 切换当前用户到:', this.currentUser.username)
      
      // 立即更新在线用户列表，移除所有用户
      this.onlineUsers = []
      this.connectionStatus = 'disconnected'
      
      // 先断开旧连接
      await signalRService.disconnect()
      
      // 确保连接完全断开
      await new Promise(resolve => setTimeout(resolve, 500))
      
      // 重置状态
      this.selectedUser = null
      
      // 重新连接
      await this.initSignalR()
      
      // 重新选择用户（如果之前有选中的用户）
      if (this.selectedUser) {
        const newSelectedUser = this.filteredUsers.find(
          user => user.username === this.selectedUser.username
        )
        this.selectedUser = newSelectedUser || null
      }
      
      console.log('✅ 用户切换完成，当前用户:', this.currentUser.username)
    },

    selectUser(user) {
      console.log('👤 选择用户:', user.username)
      this.selectedUser = user
      this.newMessage = ''
      
      // 清除该用户的未读消息计数
      this.clearUnreadCount(user.username)
      
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    },

    isUserOnline(username) {
      // 当前用户始终在线
      if (username === this.currentUser.username) {
        return true
      }
      const isOnline = this.onlineUsers.includes(username)
      console.log(`🔍 检查用户 ${username} 在线状态:`, isOnline)
      return isOnline
    },

    getUserByUsername(username) {
      return this.allUsers.find(user => user.username === username)
    },

    getChatKey(user1, user2) {
      const users = [user1, user2].sort()
      return users.join('_')
    },

    getChatMessages(otherUsername) {
      const chatKey = this.getChatKey(this.currentUser.username, otherUsername)
      const messages = this.chatMessages[chatKey] || []
      console.log(`📖 获取聊天记录 ${chatKey}:`, messages.length + ' 条消息')
      return messages
    },

    getLastMessage(otherUsername) {
      const messages = this.getChatMessages(otherUsername)
      if (!messages || messages.length === 0) return "暂无消息"
      const lastMessage = messages[messages.length - 1]
      return lastMessage.text.length > 20 ? lastMessage.text.substring(0, 20) + '...' : lastMessage.text
    },

    getLastMessageTime(otherUsername) {
      const messages = this.getChatMessages(otherUsername)
      if (!messages || messages.length === 0) return ""
      const lastMessage = messages[messages.length - 1]
      return this.formatTime(lastMessage.time, true)
    },

    incrementUnreadCount(username) {
      if (!this.unreadMessages[username]) {
        this.unreadMessages[username] = 0
      }
      this.unreadMessages[username]++
      console.log(`🔴 用户 ${username} 未读消息:`, this.unreadMessages[username])
    },

    getUnreadCount(username) {
      return this.unreadMessages[username] || 0
    },

    clearUnreadCount(username) {
      this.unreadMessages[username] = 0
      console.log(`🟢 清除用户 ${username} 的未读消息`)
    },

    formatTime(time, short = false) {
      const date = new Date(time)
      if (short) {
        return date.toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        })
      }
      return date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit',
        second: '2-digit'
      })
    },

    scrollToBottom() {
      const container = this.$refs.messagesContainer
      if (container) {
        container.scrollTop = container.scrollHeight
        console.log('📜 滚动到底部')
      }
    },

    async checkConnectionStatus() {
      console.log('🔍 检查连接状态...')
      console.log('当前用户:', this.currentUser.username)
      console.log('连接状态:', this.connectionStatus)
      console.log('在线用户列表:', this.onlineUsers)
      
      // 手动请求在线用户列表
      if (signalRService.connection && this.connectionStatus === 'connected') {
        try {
          console.log('🟡 请求服务器在线用户列表...')
          const users = await signalRService.connection.invoke('GetOnlineUsers')
          console.log('✅ 服务器返回的在线用户:', users)
          this.onlineUsers = users || []
          
          // 确保当前用户始终在在线列表中
          if (!this.onlineUsers.includes(this.currentUser.username)) {
            this.onlineUsers.push(this.currentUser.username)
          }
          
          this.$forceUpdate()
        } catch (error) {
          console.error('❌ 获取在线用户失败:', error)
        }
      } else {
        console.log('❌ 连接不可用，无法获取在线用户列表')
      }
    }
  },
  async mounted() {
    console.log('🚀 ChatApp 组件挂载')
    
    if (this.filteredUsers.length > 0) {
      this.selectedUser = this.filteredUsers[0]
    }
    
    await this.initSignalR()
  },
  
  beforeUnmount() {
    console.log('🧹 清理 SignalR 连接')
    signalRService.disconnect()
  }
}
</script>

<style scoped>
/* 添加离线消息样式 */
.offline-message-hint {
  font-size: 0.7rem;
  color: #ff9800;
  margin-top: 4px;
  text-align: center;
}

.message-status.failed {
  color: #f44336;
}

.debug-info {
  font-size: 0.8rem;
  color: #666;
  margin-left: 10px;
}

/* 其他样式保持不变 */
.chat-app {
  position: relative;
}

.content {
  margin: 20px auto;
  display: flex;
  width: 95%;
  max-width: 1400px;
  height: 85vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
}

.left {
  flex: 0 0 350px;
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
}

.left-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background-color: white;
}

.left-header h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.current-user-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.current-user-selector label {
  font-size: 0.9rem;
  color: #6c757d;
}

.user-select {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.online-status {
  font-size: 0.8rem;
  color: #28a745;
  font-weight: 500;
}

.user-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
  position: relative;
}

.user-item:hover {
  background-color: #f8f9fa;
}

.user-item.active {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
}

.user-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: #4caf50;
  border: 2px solid white;
  border-radius: 50%;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.nickname {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1rem;
  margin-bottom: 4px;
}

.last-message {
  color: #6c757d;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-time {
  color: #9e9e9e;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-left: 10px;
}

.unread-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff4757;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 0.7rem;
  min-width: 18px;
  text-align: center;
}

.right {
  flex: 1;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chat-user-info {
  display: flex;
  align-items: center;
}

.chat-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-user-details h3 {
  margin: 0 0 4px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.chatting-status {
  color: #666;
  font-size: 0.85rem;
}

.current-user-badge {
  background: #e3f2fd;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #1976d2;
  font-weight: 500;
}

.chat-messages {
  flex: 1;
  padding: 20px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.message-sent {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-content {
  max-width: 60%;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
}

.message-sent .message-bubble {
  background-color: #007bff;
  color: white;
  border-bottom-right-radius: 4px;
}

.message-received .message-bubble {
  background-color: white;
  color: #333;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
}

.message-text {
  margin: 0 0 5px 0;
  line-height: 1.4;
}

.message-time {
  font-size: 0.75rem;
  opacity: 0.7;
  display: block;
  margin-top: 5px;
}

.message-status {
  font-size: 0.7rem;
  margin-left: 5px;
  opacity: 0.7;
}

.chat-input-container {
  padding: 20px 30px;
  background-color: white;
  border-top: 1px solid #e0e0e0;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.message-input {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 1rem;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
  max-height: 120px;
}

.message-input:focus {
  border-color: #007bff;
}

.send-btn {
  background: #007bff;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s;
  flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
  background: #0056b3;
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.offline-notice {
  text-align: center;
  color: #ff9800;
  font-size: 0.8rem;
  margin-top: 10px;
}

.no-selection {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #6c757d;
  background-color: white;
  padding: 40px;
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.5;
}

.no-selection h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.no-selection p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.current-user-hint {
  font-size: 0.9rem !important;
  color: #007bff !important;
  background: #e3f2fd;
  padding: 8px 16px;
  border-radius: 20px;
  margin-top: 10px !important;
}

.online-users {
  margin-top: 30px;
  text-align: left;
}

.online-users h4 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.online-users ul {
  list-style: none;
  padding: 0;
}

.online-users li {
  padding: 5px 0;
  color: #28a745;
}

.connection-status {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.connection-status.connected {
  background-color: #4caf50;
  color: white;
}

.connection-status.connecting,
.connection-status.reconnecting {
  background-color: #ff9800;
  color: white;
}

.connection-status.error {
  background-color: #f44336;
  color: white;
}

.connection-status.disconnected {
  background-color: #9e9e9e;
  color: white;
}

.reconnect-btn, .debug-btn {
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.7rem;
}

.reconnect-btn:hover, .debug-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar,
.user-list::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.user-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb,
.user-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.user-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
    height: 95vh;
  }
  
  .left {
    flex: 0 0 200px;
  }
  
  .message-content {
    max-width: 80%;
  }
  
  .chat-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .debug-info {
    font-size: 0.7rem;
  }
}
</style>